<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UniApp小程序 - 获取微信号</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #07C160 0%, #09BB07 100%);
            color: #333;
            line-height: 1.6;
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1000px;
            margin: 0 auto;
        }
        
        header {
            text-align: center;
            padding: 30px 0;
            color: white;
        }
        
        header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        header p {
            font-size: 1.2rem;
            opacity: 0.9;
        }
        
        .logo {
            width: 100px;
            height: 100px;
            margin: 0 auto 20px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .logo i {
            font-size: 50px;
            color: #07C160;
        }
        
        .card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            padding: 25px;
            margin-bottom: 25px;
            transition: transform 0.3s ease;
        }
        
        .card:hover {
            transform: translateY(-5px);
        }
        
        .card-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f1f1f1;
        }
        
        .card-header i {
            font-size: 24px;
            margin-right: 15px;
            color: #07C160;
        }
        
        .card-header h2 {
            font-size: 1.8rem;
            color: #333;
        }
        
        .step {
            margin-bottom: 20px;
        }
        
        .step h3 {
            color: #07C160;
            margin-bottom: 10px;
            font-size: 1.3rem;
        }
        
        .code {
            background: #f8f8f8;
            border-left: 4px solid #07C160;
            padding: 15px;
            margin: 15px 0;
            border-radius: 0 5px 5px 0;
            overflow-x: auto;
            font-family: 'Courier New', monospace;
            line-height: 1.5;
        }
        
        .btn {
            display: inline-block;
            background: #07C160;
            color: white;
            padding: 12px 25px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: bold;
            margin-top: 10px;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }
        
        .btn:hover {
            background: #06AE56;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .result {
            background: #eefaf1;
            padding: 20px;
            border-radius: 10px;
            margin-top: 20px;
            display: none;
        }
        
        .result.active {
            display: block;
        }
        
        .wechat-id {
            font-size: 1.5rem;
            font-weight: bold;
            color: #07C160;
            text-align: center;
            margin: 10px 0;
        }
        
        .permissions {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 20px;
        }
        
        .permission-item {
            flex: 1;
            min-width: 200px;
            background: #f8f8f8;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
        }
        
        .permission-item h4 {
            color: #07C160;
            margin-bottom: 8px;
            font-size: 1rem;
        }
        
        .notes {
            background: #fff8e1;
            border-left: 4px solid #ffc107;
            padding: 15px;
            margin: 15px 0;
            border-radius: 0 5px 5px 0;
        }
        
        .notes h3 {
            color: #ff9800;
            margin-bottom: 10px;
        }
        
        footer {
            text-align: center;
            color: white;
            padding: 30px 0;
            font-size: 0.9rem;
            opacity: 0.8;
        }
        
        @media (max-width: 768px) {
            .card-header h2 {
                font-size: 1.5rem;
            }
            
            header h1 {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">
                <i class="fab fa-weixin"></i>
            </div>
            <h1>UniApp小程序获取微信号</h1>
            <p>实现用户微信号的获取与显示</p>
        </header>
        
        <div class="card">
            <div class="card-header">
                <i class="fas fa-code"></i>
                <h2>代码实现</h2>
            </div>
            <div class="step">
                <h3>1. 检查用户授权状态</h3>
                <div class="code">
// 检查用户是否已授权
uni.getSetting({
  success: (res) => {
    if (res.authSetting['scope.userInfo']) {
      // 用户已授权，可以直接获取用户信息
      this.getWechatInfo();
    } else {
      // 用户未授权，需要先请求授权
      this.requestUserInfo();
    }
  }
})
                </div>
            </div>
            
            <div class="step">
                <h3>2. 请求用户授权</h3>
                <div class="code">
// 请求用户授权
requestUserInfo() {
  uni.authorize({
    scope: 'scope.userInfo',
    success: () => {
      // 用户同意授权
      this.getWechatInfo();
    },
    fail: () => {
      // 用户拒绝授权
      uni.showModal({
        title: '提示',
        content: '您拒绝了授权，将无法使用完整功能',
        showCancel: false
      })
    }
  })
}
                </div>
            </div>
            
            <div class="step">
                <h3>3. 获取用户信息（包含微信号）</h3>
                <div class="code">
// 获取用户信息
getWechatInfo() {
  uni.getUserInfo({
    success: (res) => {
      // 获取到的用户信息
      console.log(res.userInfo);
      // 微信用户昵称
      console.log(res.userInfo.nickName);
      // 微信用户头像
      console.log(res.userInfo.avatarUrl);
      // 注意：小程序平台无法直接获取微信号
      // 需要使用云开发或其他后端方式间接获取
    },
    fail: (err) => {
      console.log('获取用户信息失败', err);
    }
  })
}
                </div>
            </div>
            
            <button class="btn" onclick="simulateGetWechatId()">
                <i class="fas fa-user-check"></i> 模拟获取微信号
            </button>
            
            <div class="result" id="result">
                <h3>获取成功</h3>
                <p>当前用户的微信号为：</p>
                <div class="wechat-id" id="wechatId">wxid_2023abc</div>
                <p>注意：这只是一个模拟演示，实际小程序中无法直接获取微信号。</p>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <i class="fas fa-shield-alt"></i>
                <h2>权限说明</h2>
            </div>
            <div class="permissions">
                <div class="permission-item">
                    <h4>用户信息 (scope.userInfo)</h4>
                    <p>获取用户昵称、头像、性别等信息</p>
                </div>
                <div class="permission-item">
                    <h4>微信运动 (scope.werun)</h4>
                    <p>获取用户微信运动数据</p>
                </div>
                <div class="permission-item">
                    <h4>用户位置 (scope.userLocation)</h4>
                    <p>获取用户当前位置信息</p>
                </div>
            </div>
            
            <div class="notes">
                <h3>注意事项</h3>
                <ul>
                    <li>小程序平台无法直接获取用户的微信号</li>
                    <li>需要通过微信开放平台或云开发间接实现</li>
                    <li>用户必须授权后才能获取基本信息</li>
                    <li>获取微信号需要企业资质且经过微信审核</li>
                </ul>
            </div>
        </div>
        
        <div class="card">
            <div class="card-header">
                <i class="fas fa-lightbulb"></i>
                <h2>替代方案</h2>
            </div>
            <div class="step">
                <h3>通过云开发获取OpenID</h3>
                <div class="code">
// 通过云函数获取OpenID
uniCloud.callFunction({
  name: 'getOpenId',
  success: (res) => {
    console.log('OpenID:', res.result.openid);
    // OpenID是用户在微信生态中的唯一标识
  },
  fail: (err) => {
    console.error('获取OpenID失败', err);
  }
})
                </div>
            </div>
            
            <div class="step">
                <h3>通过UnionID关联用户</h3>
                <div class="code">
// 如果用户关注了关联公众号，可以获取UnionID
// 需要微信开放平台绑定
uni.login({
  success: (res) => {
    if (res.code) {
      // 将code发送到后端，后端通过微信API获取UnionID
      uni.request({
        url: 'https://your.domain.com/api/getUnionId',
        method: 'POST',
        data: { code: res.code },
        success: (response) => {
          console.log('UnionID:', response.data.unionid);
        }
      })
    }
  }
})
                </div>
            </div>
        </div>
    </div>
    
    <footer>
        <p>© 2023 UniApp小程序开发指南 | 本文档仅供参考，具体实现请参考官方文档</p>
    </footer>

    <script>
        function simulateGetWechatId() {
            // 模拟获取微信号的过程
            const resultDiv = document.getElementById('result');
            const wechatIdDiv = document.getElementById('wechatId');
            
            // 生成随机微信号
            const randomId = 'wxid_' + Math.random().toString(36).substr(2, 9);
            wechatIdDiv.textContent = randomId;
            
            // 显示结果
            resultDiv.classList.add('active');
            
            // 滚动到结果区域
            resultDiv.scrollIntoView({ behavior: 'smooth' });
        }
        
        // 页面加载时显示提示
        window.onload = function() {
            console.log('页面加载完成，请注意小程序平台无法直接获取微信号');
        };
    </script>
</body>
</html>